<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="right">
    <div class="h_heard_title">属性及请求</div>
    <n-divider v-if="selectedPelData.pelDataId" title-placement="left">属性</n-divider>
    <div class="right_top">
      <div v-if="selectedPelData.pelDataId">
        <!-- id  -->
        <div class="h_flex_column" style="user-select: none;">
          <text class="h_info_lable">id:</text>
          <text class="h_info_val">{{ selectedPelData.pelDataId }}</text>
        </div>
        <!-- 标签  -->
        <div class="h_info">
          <text style="width:80px">标签名:</text>
          <n-input type="text" v-model:value="selectedPelData.pelDataDescr" />
        </div>
        <!-- 变量类型  -->
        <div class="h_info">
          <text class="h_info_lable">变量类型:</text>
          <NSelect class="h_info_val" :consistent-menu-width="false" v-model:value="selectedPelData.pelDataType"
            :options="valTypeOpt" />
        </div>
        <!-- JSON数据  -->
        <div class="h_flex_column" style="margin:10px" v-if="selectedPelData.pelDataType === 0">

        </div>
        <!-- 单行文本  -->
        <div class="h_info" v-if="selectedPelData.pelDataType === 1">
          <text class="h_info_lable">变量:</text>
          <NInput type="text" class="h_info_val" v-model:value="selectedPelData.pelDataVal" />
        </div>
        <!-- 颜色 -->
        <div class="h_info" v-if="selectedPelData.pelDataType === 2">
          <text class="h_info_lable">变 量:</text>
          <div class="h_info_val" :style="{
            height: '20px',
            width: '100%',
            'background-color': selectedPelData.pelDataVal,
          }"></div>
        </div>
      </div>
      <svg v-else style="margin-left: 30px; margin-top: 30px; width: 160; height: 160" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1024 1024"
        v-html="onGetDataManagerIcon('noneDataIcon')"></svg>
    </div>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入 ★
/* ================================================================================================ */
import { ref, reactive, computed, watch, onMounted } from "vue";
import { useMessage } from 'naive-ui'

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetUUID,
  onGetDataManagerIcon,
} from "@/functions";

/**🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾*/
// 🐸 引入存储
/**🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useStaticStore } from "@/store/staticStore"; // 静态

/**👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾*/
// 🐸 使用存储
/**👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布
const staticStore = useStaticStore(); // 静态
const message = useMessage()// 消息

/* ================================================================================================ */
//                                数据 ★
/* ================================================================================================ */
/** 选择的行数据 */
let selectedPelData = computed(() => canvasStore.selectedPelData);


/** 图标尺寸 */
const IconSize = 26;
/** 颜色选项卡 */
const colorOpt = staticStore.colorOpt;
/** 变量类型选项:0-JSON数据;1-单行文本;2-颜色; */
const valTypeOpt = staticStore.valTypeOpt;
/** 请求类型选项:1-GET;2-POST;3-PUSH */
const requestTypeOpt = staticStore.requestTypeOpt;
/** 请求数周期选项:1-0.1秒; 2-0.5秒;3-1秒;4-1分钟;5-1小时; 6-1天; */
const requestCycelOpt = staticStore.requestCycelOpt;

/** 新建动画参数 */
const onCreateAnIfo = (item: any) => {
  // console.log("新建动画参数");
  // console.log(item);
  canvasStore.selectedPelData.pelDataVal.jsonVal.push({
    key: onGetUUID(),
    descr: "描述内容", // 描述
    val: "0",
    /** 设备数据_id */
    equipDataId: "none",
  });
  message.success('新建动画参数，成功')
  canvasStore.tips = "新建动画参数，成功";
};

/** 删除动画参数 */
const onDeleteAnIfo = (item: any, index: number) => {
  // console.log("删除动画参数");
  // console.log(item);
  let findKey = String(item.key);
  if (index === 0) {
    message.warning('删除动画参数，顶部数据不能删除')
    canvasStore.tips = "删除动画参数，顶部数据不能删除";
    return;
  }
  /** 新动画值 */
  let newAnVal = [];

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 删除选定项
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 深度拷贝 */
  let copyAnVal = JSON.parse(JSON.stringify(canvasStore.selectedPelData.pelDataVal.jsonVal));
  for (let index = 0; index < copyAnVal.length; index++) {
    const element = copyAnVal[index];
    if (element.key !== findKey) {
      newAnVal.push(element);
    }
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  canvasStore.selectedPelData.pelDataVal.jsonVal = newAnVal;
  message.success('删除成功')
  canvasStore.tips = "删除成功";
};

/** 移动到顶部 */
const onMoveTop = (item: any, index: number) => {
  // console.log("移动到顶部");
  // console.log(item);

  /** 查询键 */
  let findKey = String(item.key);
  /** 新动画值 */
  let newAnVal = [];
  /** 移动项 */
  let moveItem = JSON.parse(JSON.stringify(item));

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历-判断是否为顶部
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (index === 0) {
    message.error('移动到顶部,已经在顶部')
    canvasStore.tips = "移动到顶部,已经在顶部";
    return;
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 删除选定项
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 深度拷贝 */
  let copyAnVal = JSON.parse(JSON.stringify(canvasStore.selectedPelData.pelDataVal.jsonVal));
  for (let index = 0; index < copyAnVal.length; index++) {
    const element = copyAnVal[index];
    if (element.key !== findKey) {
      newAnVal.push(element);
    }
  }
  newAnVal.unshift(moveItem); //在顶部添加

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  canvasStore.selectedPelData.pelDataVal.jsonVal = newAnVal;
  message.success('移动成功');
  canvasStore.tips = "移动成功";
};

/** 移动到底部 */
const onMoveBottom = (item: any, index: number) => {
  // console.log("移动到底部");
  // console.log(item);
  /** 查询键 */
  let findKey = String(item.key);
  /** 新动画值 */
  let newAnVal = [];
  /** 索引值 */
  let indexVal = Number(canvasStore.selectedPelData.pelDataVal.jsonVal.length - 1);
  /** 移动项 */
  let moveItem = JSON.parse(JSON.stringify(item));

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 判断是否为底部
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (index === indexVal) {
    message.error('移动成底部，已经在底部');
    canvasStore.tips = "移动成底部，已经在底部";
    return;
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 删除选定项
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 深度拷贝 */
  let copyAnVal = JSON.parse(JSON.stringify(canvasStore.selectedPelData.pelDataVal.jsonVal));
  for (let index = 0; index < copyAnVal.length; index++) {
    const element = copyAnVal[index];
    if (element.key !== findKey) {
      newAnVal.push(element);
    }
  }
  newAnVal.push(moveItem); //在底部添加

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  canvasStore.selectedPelData.pelDataVal.jsonVal = newAnVal;
  message.success('移动成功');
  canvasStore.tips = "移动成功";
};
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

.right {
  width: 100%;
  height: 80vh;
}

.right_top {
  height: 80vh;
  overflow-x: hidden;
  overflow-y: scroll;
  /* firefox */
  scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
  scrollbar-width: auto;
  display: flex;
  flex-direction: column;

  /* chrome */
  &::-webkit-scrollbar,
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(197, 197, 197);
  }
}

/* 参数 */
.h_info {
  padding: 5px;
  width: 100%;
  user-select: none;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

/* 参数标题 */
.h_info_lable {
  padding-left: 3px;
  width: 150px;
}

/* 参数变量 */
.h_info_val {
  width: 100%;
  margin-right: 16px;
}</style>
